<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <div class="tk_form">
                    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="素材内容" prop="content">
                            <el-input type="textarea" v-model="form.content" size="small" :autosize="{ minRows: 8, maxRows: 8}"></el-input>
                        </el-form-item>
                        <el-form-item label="类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择" size="small">
                                <el-option key="1" label="单图模式" value="1"></el-option>
                                <el-option key="2" label="多图模式" value="2"></el-option>
                                <el-option key="3" label="视频模式" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分类" prop="sortId">
                            <el-select v-model="form.sortId" placeholder="请选择" size="small" filterable>
                                <el-option v-for="item in sortList" :key="item.name" :value="item.id" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序" prop="level">
                            <el-input type="number" v-model="form.level" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="上传图片" v-if="form.type==1">
                            <el-upload
                                class="upload-demo"
                                :action="UPLOAD_URL"
                                :on-success="handleSuccess1"
                                list-type="picture-card"
                                :limit="1"
                                :file-list="fileList"
                                accept="image/jpeg,image/png">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="上传图片" v-if="form.type==2">
                            <el-upload
                                class="upload-demo"
                                :action="UPLOAD_URL"
                                :on-success="handleSuccess2"
                                multiple="true"
                                list-type="picture-card"
                                :limit="9"
                                :file-list="fileList"
                                accept="image/jpeg,image/png"
                                >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="上传视频" v-if="form.type==3">
                            <el-upload
                                class="upload-demo"
                                :action="UPLOADV_URL"
                                :on-success="handleSuccess3"
                                :limit="1"
                                :file-list="fileList"
                                accept="video/mp4, video/quicktime">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" size="small">确定</el-button>
                            <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { UPLOAD_URL } from '@/utils/http.js';
import { UPLOADV_URL } from '@/utils/http.js';
export default {
  data() {
    return {
        UPLOAD_URL,
        UPLOADV_URL,
        tkIsShow:false,
        title:"",
        form:{
            id:0,
            content:'',
            level:'',
            sortId:'',
            type:'',
            ziyuanUrl:''
        },
        rules: {
            content: [
                {required: true,message: "请输入素材内容",trigger: ["blur,change"]}
            ],
            type: [
                {required: true,message: "请选择素材类型",trigger: ["blur,change"]}
            ],
            sortId: [
                {required: true,message: "请选择所属分类",trigger: ["blur,change"]}
            ],
            level: [
                {required: true,message: "请输入排序",trigger: ["blur,change"]}
            ]
        },
        sortList:[]
    };
  },
  methods: {
    __init(id) { 
        this.form.id=id;
        if(id==0){
            this.form={
                id:0,
                content:'',
                level:'',
                sortId:'',
                type:'',
                ziyuanUrl:''
            }
        }
        this.getSortList();
    },
    getSortList(){
        var url="userApi/getSucaiSortList";
        var params={
        }
        this.$post(url, params).then((res) => {
            console.log(res)
            if (res.code === 200) {
                this.sortList=res.data;
            } else {
            this.$message.error(res.msg)
            }
        });
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var url="manager/addSucaiById";
            var params={
                ...this.form
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 200) {
                    this.$message.success("操作成功")
                    this.closeTk();
                } else {
                    this.$message.error(res.msg)
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    closeTk(){
        this.tkIsShow = false;
        this.$emit("close");
    },
    handleSuccess1(response, file, fileList) {
        console.log(response);
        if(response.code==200){
            this.$message.success('上传成功');
            this.form.ziyuanUrl=response.data;
        }
    },
    handleSuccess2(response, file, fileList) {
        console.log(response);
        if(response.code==200){
            this.$message.success('上传成功');
            this.form.ziyuanUrl=this.form.ziyuanUrl+response.data+";";
        }
    },
    handleSuccess3(response, file, fileList) {
        console.log(response);
        if(response.code==200){
            this.$message.success('视频上传成功');
            this.form.ziyuanUrl=response.data.videoUrl;
        }
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
    top: 0;
    left: 0;
    z-index: 200;
  }
  .tankuang{
    position: fixed;
    width: 60%;
    background-color: #fff;
    top: 10%;
    left: 18%;
    z-index: 201;
    border-radius: 5px;
  }
  .tk_title{
    font-size: 17px;
    height: 25px;
    line-height: 25px;
    margin: 15px 0;
  }
  .tk_content{
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 8px; /* 设置滚动条宽度为8像素 */
        background-color: transparent;
      }
      /* 滑块样式 */
      &::-webkit-scrollbar-thumb {
        background-color: #1e4dc6; /* 设置滑块颜色为深灰色 */
        border-radius: 4px; /* 设置滑块边角半径为4像素 */
      }
      /* 滚动条轨道内部空白区域样式 */
      &::-webkit-scrollbar-track {
        background-color: #fff /* 设置轨道背景色为浅灰色 */
      }

      /* 滚动条两端按钮样式 */
      &::-webkit-scrollbar-button {
        display: none; /* 不显示按钮 */
      }

      /* 交叉点处的区域样式 */
      &::-webkit-scrollbar-corner {
        background-color: transparent; /* 设置交叉点处的背景色为透明 */
      }

      /* 调整大小手柄样式 */
      &::-webkit-resizer {
        display: none; /* 不显示调整大小手柄 */
      }
  }
  .tk_form{
    width: 80%;
    margin-left: 10%;
    height: 100%;
  }
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
  ::v-deep .el-select>.el-input{
    width: 710px !important;
  }
  ::v-depp .el-date-editor.el-input{
    width: 710px !important;
  }
</style>
